<!--
  ~ Copyright 2019 Red Hat, Inc. and/or its affiliates.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SCESIM Editor Test</title>

    <script>
        function newDiagram() {
            window.frames.editorFrame.contentWindow.gwtEditorBeans.get("ScenarioSimulationEditor").get().setContent("","");
        }

        function loadDiagram(diagram) {
            console.log('loadDiagram ' + diagram);
            window.frames.editorFrame.contentWindow.gwtEditorBeans.get("ScenarioSimulationEditor").get().setContent('', diagram);

            //window.frames.editorFrame.contentWindow.loadFile();
            //document.getElementById("download_btn").disabled = false;
        }

        function importDMN() {
            window.frames.editorFrame.contentWindow.importDMN();
            document.getElementById("download_btn").disabled = false;
        }

        function download() {
                window.frames.editorFrame.contentWindow.gwtEditorBeans.get("ScenarioSimulationEditor").get().getContent().then(
                    function(p) {
                        var d = document.createElement('a');
                        d.setAttribute('href', 'data:text/xml;charset=utf-8,' + encodeURIComponent(p));
                        d.setAttribute('download', "diagram.scesim");
                        d.style.display = 'none';

                        document.body.appendChild(d);
                        d.click();
                        document.body.removeChild(d);
                    }
                );
        }

        var openFile = function (event) {
            var input = event.target;
            var reader = new FileReader();
            reader.onload = function () {
                var diagram = reader.result;
                loadDiagram(diagram)
            };

            reader.readAsText(input.files[0]);
        };
    </script>

</head>
<body>

<div id="editor">
    Wait until the editor is loaded to open a SCESIM file:<br>
    Create new diagram <input type="button" id="new_diag_btn" value="Create new diagram" onclick="newDiagram()" />
    Import SCESIM   <input type="file" onchange="openFile(event)" value="Choose SCESIM file" accept="scesim,txt"/>
    Import DMN <input type="button" onclick="importDMN()" value="Choose DMN file"/>
    When you are ready you can
    <input type="button" id="download_btn" value="Download the diagram" onclick="download()" />
</div>

<iframe id="editorFrame" src="index.html" width="100%" height="880px" frameBorder="0" scrolling="no"></iframe>
</body>
</html>
